<template>
  <div
    class="home-top"
    @mouseenter="showNavigation = true"
    @mouseleave="showNavigation = false"
  >
    <div class="home-top-content">
      <div class="home-top-wrap">
        <div class="index__hd">
          <h2 class="index__tit"><i class="icon_txt"></i></h2>
        </div>
      </div>
    </div>

    <Carousel
      :data="homeStore.wonderful"
      :showNavigation="showNavigation"
      comName="wonderful"
      :options="{ slidesPerView: 2, slidesPerGroup: 2 }"
    >
      <template #default="{ data }">
        <div>
          <div class="img-wrap">
            <img :src="data.picInfo" alt="" />
          </div>
          <span class="link-to-playlist">
            <a href="#">{{ data.title }}</a>
          </span>
          <span class="playlist__other">{{ data.title2 }}</span>
        </div>
      </template>
    </Carousel>
  </div>
</template>

<script lang="ts">
export default {
  name: 'MusicHome',
}
</script>

<script lang="ts" setup>
import Carousel from '@/components/Carousel/index.vue'
import { reactive, ref, onMounted } from 'vue'
import { useHomeStore } from '@/stores/homeStore'

const homeStore = useHomeStore()

const showNavigation = ref(false)
</script>

<style scoped>
.home-top {
  background-image: linear-gradient(#f2f2f2, #fff);
  min-width: 1200px;
  position: relative;
}
.home-top-content {
  width: 1200px;
  margin: 0 auto;
}
.home-top-wrap {
  padding: 50px 0 24px 0;
}
.index__hd {
  position: relative;
}
.index__tit {
  display: block;
  margin: 0 auto;
  width: 196px;
  height: 40px;
  background-image: url('./imgs/index_tit.ee334dbf.png');
  background-position-y: -100px;
}
.mod_index_tab {
  text-align: center;
  height: 50px;
}
.mod_index_tab a {
  margin: 0 20px;
  font-size: 15px;
  cursor: pointer;
}
.mod_index_tab a:hover {
  color: #31c27c;
}

.img-wrap {
  width: 590px;
  height: 236px;
  margin-bottom: 15px;
}
.img-wrap img {
  width: 100%;
  height: 100%;
}
.link-to-playlist a {
  color: #000;
  font-size: 14px;
  line-height: 23px;
  display: block;
}
.playlist__other {
  color: #999;
  font-size: 14px;
  line-height: 22px;
}
</style>
